<!--填报课时量-->
<template>
  <div class="assessment-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span @click="postList">查询</span>
        </div>
      </div>
    </div>
    <div class="plan-entry-table-container">
      <tablelist :dataList="dataList" v-show="dataList" :isOperation="true" :url="url" :colDataList="colDataList"
                 :config="config">
      </tablelist>
    </div>
    <div class="bottom-block">
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
  </div>
</template>

<script>
import tablelist from "@/views/comonents/tablelist";
import {postList} from "../../../api/classHoursAddList/addList";
import {queryCommonXueqi, queryDefaultXueQi} from "@/api/trainingManagement/place.js"

export default {
  components: {
    tablelist
  },
  data() {
    return {
      xq: "",
      xqList: [],
      url: '/teacher/classHours/addHours',
      colDataList: [{
        label: '状态',
        prop: 'checkStatus',
        align: 'center',
        width: '88'
      }, {
        label: '课程名称',
        prop: 'courseName',
        align: 'center',
        width: '180'
      }, {
        label: '教学班',
        prop: 'className',
        align: 'center',
        width: '180'
      }, {
        label: '课程性质',
        prop: 'teachNature',
        align: 'center',
        width: '120'
      }, {
        label: '教学对象',
        prop: 'teachObject',
        align: 'center',
        width: '150'
      }, {
        label: '实际上课人数',
        prop: 'studentNumber',
        align: 'center',
        width: '150'
      }, {
        label: '授课教员',
        prop: 'teacherName',
        align: 'center',
        width: '100'
      }, {
        label: '教研室',
        prop: 'department',
        align: 'center',
        width: '120'
      }, {
        label: '职称',
        prop: 'clall',
        align: 'center',
        width: '80'
      }, {
        label: '高/中/初职',
        prop: 'senjun',
        align: 'center',
        width: '100'
      }, {
        label: '承担任务',
        prop: 'task',
        align: 'center',
        width: '100'
      }, {
        label: '实装/实弹',
        prop: 'actual',
        align: 'center',
        width: '140'
      }, {
        label: '装备名称/型号',
        prop: 'equipment',
        align: 'center',
        width: '150'
      }, {
        label: '实际理论讲授课时',
        prop: 'jshour',
        align: 'center',
        width: '160'
      }, {
        label: '实际实践讲授课时',
        prop: 'sjhour',
        align: 'center',
        width: '160'
      }, {
        label: '实际合计课时',
        prop: 'actualClass',
        align: 'center',
        width: '140'
      }, {
        label: '实际折算系数',
        prop: 'actualCoefficient',
        align: 'center',
        width: '140'
      }, {
        label: '课时量',
        prop: 'amountTime',
        align: 'center',
        width: '100'
      }, {
        label: '课时标准',
        prop: 'standardClass',
        align: 'center',
        width: '120'
      }, {
        label: '备注',
        prop: 'commonts',
        align: 'center',
        width: '120'
      }],
      config: {
        mergeTarget: 'courseId', // 通用依据
        combineProp: [
          'cz',
          'courseName',
          'checkStatus',
          'className',
          'teachNature',
          'teachObject',
          'studentNumber',
        ]
      },
      dataList: [],
    }

  },

  mounted() {
    this.getDefaultXueQi();
    this.getCommonXueqi();
    // this.postList();
  },
  methods: {
    async getDefaultXueQi(){
      queryDefaultXueQi().then(res=>{
        if(res.data.code == 200){
          this.xq = res.data.data
        }
      }).then(()=>{
        this.postList()
      })
    },
    // 获取学期列表
    async getCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.xqList = res.data.data;
      }
    },
    postList: function () {
      let el = this
      let obj = {
        semester: this.xq
      }
      return new Promise(() => {
        postList(obj).then(res => {
          res.data.data.forEach(item=>{
            if(item.checkStatus == ''){
              item.checkStatus = '未填写'
            }
          })
          el.dataList = res.data.data,
            //this.config;
            console.log(res.data, 'res.data.data')
          // console.log(this.config)
        })
      })
    },
  },

};
</script>
<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 82px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-table th.el-table__cell > .cell {
    padding: 0;
  }

  .el-table .cell,
  .el-table--border .el-table__cell:first-child .cell {
    padding: 0;
  }

  .el-table__body td .cell {
    padding: 0;
  }

  .add-button {
    margin: 0 auto;
    cursor: pointer;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 65px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }
  }

  .pass-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  .wait-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ff3819;
  }

  .watch-button {
    width: 76px;
    height: 36px;
    background: #fef1e8;
    border: 1px solid #f86900;
    border-radius: 6px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f86900;
    line-height: 16px;
    margin: 2px auto;
  }
}
</style>

<style lang="less" scoped>
.assessment-container {
  width: 1900px;
  margin: 0 auto;

  .search-container {
    margin-top: 27px;
    padding-left: 43px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .search-container-left,
    .search-container-right {
      display: flex;
      flex-direction: row;
    }

    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;

      > span {
        margin-right: 6px;
      }
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }

  .bottom-block {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }

  .plan-entry-table-container {
    margin-top: 30px;

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}
</style>


<style lang="less" scoped>

  .add-button {
    margin: 0 auto;
    cursor: pointer;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 65px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }
  }

  .plan-entry-table-container {
    margin-top: 30px;
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }
    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 82px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }
    .el-table th.el-table__cell > .cell {
      padding: 0;
    }
    .el-table .cell,
    .el-table--border .el-table__cell:first-child .cell {
      padding: 0;
    }
    .el-table__body td .cell {
      padding: 0;
    }
    .pass-text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }
    .wait-text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ff3819;
    }
    .watch-button {
      width: 76px;
      height: 36px;
      background: #fef1e8;
      border: 1px solid #f86900;
      border-radius: 6px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f86900;
      line-height: 16px;
      margin: 2px auto;
    }
  }
</style>

<style lang="less" scoped>
  .assessment-container {
    width: 100% !important;
    padding: 0 60px;
    // width: 1603px;
    margin: 0 auto;
    .search-container {
      margin-top: 27px;
      // padding-left: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .search-container-left,
      .search-container-right {
        margin-top: 0px !important;
        display: flex;
        flex-direction: row;


      }
      .search-container-item {
        color: #004ca7;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-right: 30px;
        > span {
          margin-right: 6px;
        }
      }
      .search-button {
        width: 77px;
        height: 28px;
        line-height: 28px;
        background: #f1f8fe;
        border: 1px solid #51aef6;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        > span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #51aef6;
        }
        > img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }
    }
    .class-tip {
      color: #004ca7;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      margin: 40px;
    }
    .plan-entry-table-container {
      margin-top: 30px;
      .table-data {
        width: 100%;
        border: 0.8px solid #004ca7;
        /*border-radius: 9px;*/
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
      }
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../styles/text.less";
  // 表格底部样式
  @import "../../../styles/delayedExam.less";
  @import "../../../styles/supervision.less";

  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .flex-posi {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .export-btn {
    cursor: pointer;
  }

  .xxtb {
    /deep/ .el-dialog {
      height: 320px;
    }
  }

  .wrapper-container {
    width: calc(100% - 20px);
    margin: 0 auto;
  }

  /deep/ .table-container {
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      /*border-radius: 9px;*/
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }

  .wrapper-container .search-container .search-container-left {
    flex-wrap: wrap;
    .search-container-item {
      width: 12%;
      margin-right: 0px;
      .box {
        > span {
          text-align: left;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
        /deep/ .el-input__inner {
          height: 28px;
        }
      }
    }
  }

  /deep/.el-date-editor.el-input {
    width: 110px;
  }
  /deep/ .el-input--medium {
    width: 110px;
    .el-input__inner {
      height: 28px;
      width: 110px;
      padding: 0px 18px;
    }
  }
  /deep/ .el-table thead {
    color: #004ca7 !important;
  }

  .xxts {
    /deep/ .el-dialog {
      height: 320px;
    }
  }

  .btn {
    margin-top: 271px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 271px;
    .submit {
      width: 84px;
      height: 27px;
      line-height: 8px;
    }
  }
  .bottom-block {
    // display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    .export-button {
      cursor: pointer;
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }

  .a-span {
    text-decoration: underline;
    cursor: pointer;
  }

  .class-tip {
    color: #004ca7;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 40px;
  }

  .assessment-container {
    width: calc(100% - 20px);
    .table-container {
      width: 100%;
    }
  }
</style>

<!--<style lang="less" scoped>-->
  <!--#term-execution-plan{-->
    <!--/deep/ .el-button&#45;&#45;warning.is-plain{-->
      <!--background: #FFF6EF;-->
      <!--border-color: #F3B815;-->
      <!--color: #F3B815;-->
      <!--border-radius: 6px;-->
    <!--}-->
    <!--/deep/ .el-button&#45;&#45;warning.is-plain:focus, .el-button&#45;&#45;warning.is-plain:hover{-->
      <!--color: #F3B815;-->
      <!--background: #FFF6EF;-->
      <!--border: 1px solid #F3B815;-->
      <!--border-radius: 6px;-->
    <!--}-->

    <!--/deep/ .el-button&#45;&#45;success.is-plain{-->
      <!--background: #F1FFF8;-->
      <!--border-color: #02C86C;-->
      <!--color: #02C86C;-->
      <!--border-radius: 6px;-->
    <!--}-->
    <!--/deep/ el-button&#45;&#45;success.is-plain:focus, .el-button&#45;&#45;success.is-plain:hover{-->
      <!--background: #F1FFF8;-->
      <!--border: 1px solid #02C86C;-->
      <!--color: #02C86C;-->
      <!--border-radius: 6px;-->
    <!--}-->

    <!--/deep/ .el-button&#45;&#45;primary.is-plain{-->
      <!--background: #F1F8FE;-->
      <!--border-color: #51AEF6;-->
      <!--color: #51AEF6;-->
      <!--border-radius: 6px;-->
    <!--}-->

    <!--/deep/ .el-button&#45;&#45;primary.is-plain:focus, .el-button&#45;&#45;primary.is-plain:hover{-->
      <!--background: #F1F8FE;-->
      <!--border: 1px solid #51AEF6;-->
      <!--color: #51AEF6;-->
      <!--border-radius: 6px;-->
    <!--}-->

    <!--/deep/ .el-icon-btn-chexiao{-->
      <!--background: url('../../../../assets/home/chexiao.png') no-repeat;-->
      <!--font-size: 16px;-->
      <!--background-size: cover;-->
    <!--}-->
    <!--/deep/ .el-icon-btn-chexiao:before{-->
      <!--content: '替';-->
      <!--font-size: 16px;-->
      <!--visibility: hidden;-->
    <!--}-->

    <!--/deep/ .el-button&#45;&#45;danger.is-plain{-->
      <!--background: #FFEFEF;-->
      <!--border-color: #FF3819;-->
      <!--color: #FF3819;-->
      <!--border-radius: 6px;-->
    <!--}-->

    <!--/deep/ .el-button&#45;&#45;danger.is-plain:focus, .el-button&#45;&#45;danger.is-plain:hover{-->
      <!--background: #FFEFEF;-->
      <!--border: 1px solid #FF3819;-->
      <!--color: #FF3819;-->
      <!--border-radius: 6px;-->
    <!--}-->
  <!--}-->
<!--</style>-->
